<template>
  <view class="detail-container">
    <!-- 内容区域 -->
    <view scroll-y class="content-wrapper">
      <!-- 案例基本信息 -->
      <view class="base-info">
        <text class="case-title">{{ caseDetail.Title }}</text>
        <view class="meta-info">
          <u-tag :text="caseDetail.Category" size="mini" type="warning"></u-tag>
          <text class="time-text">{{ caseDetail.CreateTime }}</text>
        </view>
      </view>

      <!-- 案例内容区块 -->
      <view class="content-section">
        <view class="section-header">
          <u-icon name="list-dot" color="#2979ff"></u-icon>
          <text class="section-title">案例经过</text>
        </view>
        <text class="content-text">{{ caseDetail.Description }}</text>
      </view>

      <!-- 受骗分析区块 -->
      <view class="analysis-section">
        <view class="section-header">
          <u-icon name="warning" color="#fa3534"></u-icon>
          <text class="section-title">受骗原因</text>
        </view>
        <view class="reason-list">
          <view
            v-for="(reason, index) in caseDetail.DeceivedReason"
            :key="index"
            class="reason-item"
          >
            <text class="reason-index">{{ index + 1 }}.</text>
            <text class="reason-text">{{ reason }}</text>
          </view>
        </view>
      </view>

      <!-- 防范建议区块 -->
      <view class="prevention-section">
        <view class="section-header">
          <u-icon name="safe" color="#19be6b"></u-icon>
          <text class="section-title">防范建议</text>
        </view>
        <view class="tip-list">
          <view
            v-for="(tip, index) in caseDetail.PreventiveSuggestions"
            :key="index"
            class="tip-item"
          >
            <u-icon name="checkmark-circle" color="#19be6b" size="16"></u-icon>
            <text class="tip-text">{{ tip }}</text>
          </view>
        </view>
      </view>
    </view>

    <Comment :CaseID="CaseID" />
    <!-- 底部操作栏 -->
    <view v-if="0" class="bottom-box">
      <u-button plain icon="share" shape="circle">分享案例</u-button>
      <u-button type="primary" icon="thumb-up" shape="circle">
        有帮助({{ caseDetail.likes }})
      </u-button>
    </view>
  </view>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { getCaseDetailApi } from './service'

import Comment from './comment.vue'
import dayjs from 'dayjs'
@Component({ components: { Comment } })
export default class CaseDetail extends Vue {
  readonly categoryOptions = [
    { value: 1, label: '人脸识别' },
    { value: 2, label: '安全认证' },
    { value: 3, label: '数据加密' },
    { value: 4, label: '网络防护' }
  ]

  caseDetail: any = {}
  comments: any = []
  CaseID = ''
  async onLoad({ CaseID }: any) {
    this.CaseID = CaseID
    await this.loadData()
  }

  async loadData() {
    try {
      const { data } = await getCaseDetailApi({ CaseID: this.CaseID })
      this.caseDetail = {
        ...data,
        DeceivedReason: data.DeceivedReason?.split(','),
        PreventiveSuggestions: data.PreventiveSuggestions?.split(','),
        Category: this.categoryOptions.find(
          (item: any) => +item.value === +data.Category
        )?.label,
        CreateTime: dayjs(data.CreateTime).format('YYYY-MM-DD HH:mm:ss')
      }
    } catch (error) {
      console.error('数据加载失败:', error)
    }
  }
}
</script>

<style lang="scss" scoped>
.detail-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: auto;
  background-color: #f8f8f8;
  padding-bottom: 114rpx;
}

.header-nav {
  padding: 24rpx 32rpx;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

  .header-title {
    font-size: 32rpx;
    font-weight: bold;
  }
}

.content-wrapper {
  flex: 1;
  padding: 32rpx;
  padding-bottom: 30rpx;
  width: 100vw;
  box-sizing: border-box;
}

.base-info {
  background-color: #fff;
  padding: 32rpx;
  border-radius: 16rpx;
  margin-bottom: 24rpx;

  .case-title {
    font-size: 36rpx;
    font-weight: bold;
    margin-bottom: 16rpx;
  }

  .meta-info {
    display: flex;
    align-items: center;
    gap: 16rpx;

    .time-text {
      color: #666;
      font-size: 24rpx;
    }
  }
}

.content-section,
.analysis-section,
.prevention-section,
.related-section {
  background-color: #fff;
  padding: 32rpx;
  border-radius: 16rpx;
  margin-bottom: 24rpx;

  .section-header {
    display: flex;
    align-items: center;
    gap: 12rpx;
    margin-bottom: 24rpx;

    .section-title {
      font-size: 30rpx;
      font-weight: bold;
    }
  }
}

.content-text {
  line-height: 1.6;
  color: #333;
}

.reason-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;

  .reason-item {
    display: flex;
    gap: 12rpx;

    .reason-index {
      color: #fa3534;
      font-weight: bold;
    }
  }
}

.tip-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;

  .tip-item {
    display: flex;
    align-items: flex-start;
    gap: 12rpx;

    .tip-text {
      flex: 1;
      line-height: 1.4;
    }
  }
}

.related-list {
  .related-item {
    padding: 24rpx 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2rpx solid #eee;

    &:last-child {
      border-bottom: none;
    }

    .related-title {
      color: #333;
    }
  }
}

.footer-bar {
  padding: 24rpx 32rpx;
  background-color: #fff;
  display: flex;
  gap: 24rpx;
  box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.05);
}
</style>
